<!DOCTYPE html>
<!--A-朱黄楷-->
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link rel="stylesheet" href="css/header_footer.css">
    <link rel="stylesheet" href="css/header_footer.css">
  <style>
      *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
    body{
      background-color: transparent;
      background: linear-gradient(to right, #333, #666);
      margin: 0 auto;
      width: 1140px;
    }
    .a_1{
      width: 50%;
    }
    .a_1 span{
      color: white;
      font-size: 24px;
      width: 100%;
    }
    .el-menu{
      border: 0;
    }
    .el-menu-item{
        border: 0;
    }
    .el-menu-item:hover {
      background-color: #d49261 !important; /* 修改为您想要的颜色 */
    }
    .el-menu-item.is-active {
        background-color: #d49261 !important;
    }




  </style>
</head>
<body>
<div id="app">
  <el-container>
      </el-container>
    <el-container>
    <el-aside width="200px" style="overflow: hidden">

    </el-aside>
    <el-main style="width: 1140px;margin: 0 auto; overflow: hidden;">

       <el-card style="width: 1000px;height:700px;background-color: rgba(128, 128, 128, 0.5);;margin: 0 auto; border: 0">
         <div>
           <img :src="a_user.userUrl" width="92px" height="92px" style="border: 5px solid #ec6300;border-radius: 50%;width: 92px;">
             <span style="color: #ec6300;">欢迎回来XXX</span>
         </div>
         <div style="width: 100%;float: left;border: 0">
           <el-menu @select="a_handleSelect" mode="horizontal" style="background-color: rgba(128, 128, 128, 0.5);border: 0;" :default-active="a_currentIndex">
               <el-menu-item index="1-1" class="a_1"><span>我的课程</span></el-menu-item>
               <el-menu-item index="1-2" class="a_1"><span>个人信息</span></el-menu-item>
           </el-menu>
         </div>
         <div style="float: right;width: 100%" >
           <el-table v-if="a_currentIndex=='1-1'" :data="a_course" :cell-style="a_tbc" :header-cell-style="a_tbc" border="true">
           <el-table-column label="序号" type="index" ></el-table-column>
           <el-table-column label="课程" prop="name"></el-table-column>
           <el-table-column label="时长" prop="duration"></el-table-column>
           <el-table-column label="教练" prop="coach"></el-table-column>
           <el-table-column label="预约上课">
             <template slot-scope="scope">
               <el-button
                       forgot password
                       size="mini"
                       type="success"
                       @click="dialogFormVisible = true">预约</el-button>
             </template>
           </el-table-column>
         </el-table></div>
           <div style="float: right;width: 100%">
               <el-table v-if="a_currentIndex=='1-2'" :data="a_userArr" :show-header="false" :cell-style="a_tbc" border="true" style="overflow: hidden">
                   <el-table-column label="a" prop="header" width="100px"></el-table-column>
                   <el-table-column label="b" prop="data" width="700px"></el-table-column>
                   <el-table-column label="修改" >
                       <template slot-scope="scope" >
                           <el-button
                                   size="mini"
                                   type="success"
                                   @click="handleEditInformation(scope.$index, scope.row)">修改</el-button>
                       </template>
                   </el-table-column>
               </el-table>
           </div>
           <div>
               <el-dialog title="预约时间" :visible.sync="dialogFormVisible">
                   <div class="block">
                       <span class="demonstration">带快捷选项</span>
                       <el-date-picker
                               v-model="value"
                               type="datetime"
                               placeholder="选择日期时间"
                               align="right"
                               :picker-options="pickerOptions">
                       </el-date-picker>
                   </div>
               </el-dialog>
           </div>

               <el-button-group >
                   <el-button type="primary" icon="el-icon-arrow-left" >上一页</el-button>
                   </el-button-group>
       </el-card>
    </el-main>

  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {

          a_tbc:"background-color:rgba(128, 128, 128, 0.3)",
          a_currentIndex: '1-1',
          a_course: [{name: "aaa", duration: "3hour", coach: "bbb"}],
          a_user:{userName: "朱黄楷",userNickName:"朱德",userPassword:"3240825",userAge: "21",userGender: "男",userHeight: "183cm",userWeight: "75kg",userNumber: "18365121783",userId: "340825199908223213",userUrl:"imgs/b.jpg"},
          a_userArr: [{header: "姓名", data: "朱德"}, {header: "昵称", data:"朱德"},
              {header: "年龄", data:"21"}, {header: "性别", data: "男"},
              {header: "身高", data: "183cm"}, {header: "体重", data: "75kg"},
              {header: "手机号码", data: "18365121783"}, {header:"身份证号码",data:"340825199908223213"}],
          // a_userArr: [{header: "姓名", data: v.a_user.userName}, {header: "年龄", data: v.a_user.userAge},
          //     {header: "性别", data: v.a_user.userGender}, {header: "身高", data: v.a_user.userHeight},
          //     {header: "体重", data: v.a_user.userWeight}, {header: "手机号码", data: v.a_user.userNumber},
          //     {header:"身份证号码",data:v.a_user.userId}],
          dialogTableVisible: false,
          dialogFormVisible: false,
          pickerOptions: {
              shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                      picker.$emit('pick', new Date());
                  }
              }, {
                  text: '昨天',
                  onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24);
                      picker.$emit('pick', date);
                  }
              }, {
                  text: '一周前',
                  onClick(picker) {
                      const date = new Date();
                      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                      picker.$emit('pick', date);
                  }
              }],
              disabled:"",
              disableDate:""
          },
          value: '',
      }
    },
   methods:{

     a_handleSelect( key){
         v.a_currentIndex=key;
     },
       // 预约上课功能
     handleAppointment(){

     },
       // 修改信息功能
     handleEditInformation(){}
   }
  })
</script>
</html>